import React, { useContext, useState } from 'react'
import project from '../assets/css/project.module.css'
import cont from '../assets/js/cont'
import louyu from '../assets/css/louyu.module.css'
import { CloseOutlined } from '@ant-design/icons';
import axios from 'axios';
import { message } from 'antd';

export default function AddProject(props) {
    let act = useContext(cont);
    const { getData } = props
    let [name, setName] = useState('')
    let [invest1, setInvest1] = useState(false)
    let [operate1, setOperate1] = useState(false)
    // 图片
    function getImg(url) {
        return new URL(url, import.meta.url).href;
    }

    // 新建项目
    const addProject = () => {
        if (name == '') {
            warning()
            return
        } else if (invest1 == false && operate1 == false) {
            warning()
            return
        } else {
            axios.post('/api/project/new', {
                name: name,
                invest: invest1 ? 1 : 0,
                operate: operate1 ? 1 : 0,
            }).then((res) => {
                console.log(res);
                getData()
                act.change()
                success()
            })
        }
    }

    // 填写提示框
    const warning = () => {
        message.open({
            type: 'warning',
            content: '请填写内容....',
        });
    };

    // 新建成功提示框
    const success = () => {
        message.open({
            type: 'success',
            content: '项目新建成功！',
        });
    };

    return (
        <div className={project.cover}>
            <div className={project.add}>
                <div className={louyu.head}>
                    <span>新建项目</span>
                    <CloseOutlined style={{ color: "#B4B6BB" }} onClick={() => {
                        act.change()
                    }} />
                </div>
                <div className={louyu.input}>
                    <span className={louyu.fuhao}>*</span>
                    <span>项目名称：</span>
                    <div className={louyu.input1}>
                        <input placeholder='请输入' value={name} onChange={(e) => {
                            setName(e.target.value);
                        }} />
                    </div>
                </div>
                <div className={louyu.input}>
                    <span className={louyu.fuhao}>*</span>
                    <span>开通模块</span>
                    <div className={project.openModule}>
                        <div className={project.open}>
                            <div>招商</div>
                            <div>空间定价 | 租控 | 租约</div>
                            <button className={invest1 == true ? project.onOpen : project.downOpen} onClick={() => { setInvest1(!invest1) }}>{invest1 == true ? '已开通' : '开通'}</button>
                        </div>
                        <div className={project.open}>
                            <div>运营</div>
                            <div>公告 | 服务保修 | 投诉建议</div>
                            <button className={operate1 == true ? project.onOpen : project.downOpen} onClick={() => { setOperate1(!operate1) }}>{operate1 == true ? '已开通' : '开通'}</button>
                        </div>
                        <div className={project.open}>
                            <div>社区</div>
                            <div>即将上线~</div>
                        </div>
                        <div className={project.open}>
                            <div>设备设施</div>
                            <div>即将上线~</div>
                        </div>
                        <div className={project.open}>
                            <div>增值服务</div>
                            <div>即将上线~</div>
                        </div>
                        <div className={project.open}>
                            <div>社区</div>
                            <div>即将上线~</div>
                        </div>
                    </div>
                </div>
                <div className={louyu.tonext}>
                    <button className={louyu.next} onClick={() => { addProject() }}>保存</button>
                </div>
            </div>
        </div>
    )
}
